<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>购物商城</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../scss/detail.css">
  <style>
    * {
      margin: 0 auto;
      padding: 0;
      list-style: none;
    }

    .header-a {
      text-decoration: none;
      color: #CCCCCC;
    }

    li {
      float: left;
      width: 6.25%;
      text-align: center;
      line-height: 30px;


    }

    li a {
      color: #FFFFFF;
      font-size: 12px;
      text-decoration: none;
    }

    li a:hover {
      color: #FFFF00;
    }

    a:hover {
      color: black;
    }
  </style>

</head>

<body>

  <div>
    <!--头页面的第一部分-->
    <div style="width: 1000px;height: 32px;font-size: 12px;line-height: 32px;text-align: right ">
      官方网站：<a href="http://gz.gec-edu.org/?gzbdgzbdyueqianpc23"> http://gz.gec-edu</a>
      [<a href="#">登录</a>]
      [<a href="#">免费注册</a>]
      [<a href="#">我的购物车</a>]
      [<a href="#">我的订单</a>]
      <a href="#">设置为首页</a>&ensp;|
      <a href="#">加入收藏</a>
    </div>
    <!--头页面的第二部分-->
    <div style="width: 1000px;height: 110px;position: relative">
      <img src="../images/banner.gif" alt="" style="margin-top: 10px;">

      <div style="position: absolute;right: 50px;top: 30px;font-size: 12px;">
        <div style="border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height: 20px;text-align: center">
          <a href="#" class="header-a">关于我们</a></div>
        <div
          style="margin-top: 10px;border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height: 20px;text-align: center">
          <a href="#" class="header-a">联系方式</a></div>
      </div>

    </div>
    <!--头页面的第三部分-->
    <div style="width: 100%;height: 30px;background-color: #CC3333">
      <div style="width: 1000px;height: 30px;">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">护肤</a></li>
          <li><a href="#">彩妆</a></li>
          <li><a href="#">香氛</a></li>
          <li><a href="#">身体护理</a></li>
          <li><a href="#">礼盒套装</a></li>
          <li><a href="#">母婴专区</a></li>
          <li><a href="#">男士专区</a></li>
          <li><a href="#">粉底</a></li>
          <li><a href="#">粉饼</a></li>
          <li><a href="#">睫毛膏</a></li>
          <li><a href="#">唇彩</a></li>
          <li><a href="#">腮红</a></li>
          <li><a href="#">食品保健</a></li>
          <li><a href="#">瘦身类</a></li>
          <li><a href="#">美容类</a></li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>